interface ComponentConfig {
    name: string
    type: string
    description: string
}

export class CodeGenerator {
    static generate(config: ComponentConfig): string {
        const {name, type, description} = config

        // 根据组件类型选择模板
        switch (type) {
            case "form":
                return this.generateFormComponent(name, description)
            case "layout":
                return this.generateLayoutComponent(name, description)
            case "data":
                return this.generateDataComponent(name, description)
            case "navigation":
                return this.generateNavigationComponent(name, description)
            case "basic":
            default:
                return this.generateBasicComponent(name, description)
        }
    }

    private static generateBasicComponent(name: string, description: string): string {
        return `<script setup lang="ts">
import { ref } from 'vue';

/**
 * ${description || `${name} 组件`}
 */
interface Props {
  title?: string;
  variant?: 'primary' | 'secondary' | 'danger';
}

const props = withDefaults(defineProps<Props>(), {
  title: '${name}',
  variant: 'primary'
});

const emit = defineEmits<{
  (e: 'update:count', value: number): void;
}>();

const count = ref(0);

const increment = () => {
  count.value++;
  emit('update:count', count.value);
};
</script>

<template>
  <div class="p-4 rounded-lg shadow-md" :class="{
    'bg-indigo-50 text-indigo-700': variant === 'primary',
    'bg-green-50 text-green-700': variant === 'secondary',
    'bg-red-50 text-red-700': variant === 'danger'
  }">
    <h3 class="text-lg font-medium mb-2">{{ title }}</h3>
    <p class="mb-4">当前计数: {{ count }}</p>
    <button 
      @click="increment"
      class="px-4 py-2 rounded-md transition-colors"
      :class="{
        'bg-indigo-500 hover:bg-indigo-600 text-white': variant === 'primary',
        'bg-green-500 hover:bg-green-600 text-white': variant === 'secondary',
        'bg-red-500 hover:bg-red-600 text-white': variant === 'danger'
      }"
    >
      增加计数
    </button>
  </div>
</template>`
    }

    private static generateFormComponent(name: string, description: string): string {
        return `<script setup lang="ts">
import { ref } from 'vue';

/**
 * ${description || `${name} 表单组件`}
 */
interface FormData {
  username: string;
  email: string;
  password: string;
}

interface Props {
  submitLabel?: string;
}

const props = withDefaults(defineProps<Props>(), {
  submitLabel: '提交'
});

const emit = defineEmits<{
  (e: 'submit', data: FormData): void;
}>();

const formData = ref<FormData>({
  username: '',
  email: '',
  password: ''
});

const errors = ref<Partial<Record<keyof FormData, string>>>({});

const validateForm = (): boolean => {
  const newErrors: Partial<Record<keyof FormData, string>> = {};
  
  if (!formData.value.username) {
    newErrors.username = '用户名不能为空';
  }
  
  if (!formData.value.email) {
    newErrors.email = '邮箱不能为空';
  } else if (!/^\\S+@\\S+\\.\\S+$/.test(formData.value.email)) {
    newErrors.email = '邮箱格式不正确';
  }
  
  if (!formData.value.password) {
    newErrors.password = '密码不能为空';
  } else if (formData.value.password.length < 6) {
    newErrors.password = '密码长度不能小于6位';
  }
  
  errors.value = newErrors;
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = () => {
  if (validateForm()) {
    emit('submit', formData.value);
  }
};
</script>

<template>
  <form @submit.prevent="handleSubmit" class="space-y-4 p-6 bg-white rounded-lg shadow-md">
    <div class="space-y-2">
      <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
      <input
        id="username"
        v-model="formData.username"
        type="text"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
        :class="{ 'border-red-500': errors.username }"
      />
      <p v-if="errors.username" class="text-sm text-red-600">{{ errors.username }}</p>
    </div>
    
    <div class="space-y-2">
      <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
      <input
        id="email"
        v-model="formData.email"
        type="email"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
        :class="{ 'border-red-500': errors.email }"
      />
      <p v-if="errors.email" class="text-sm text-red-600">{{ errors.email }}</p>
    </div>
    
    <div class="space-y-2">
      <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
      <input
        id="password"
        v-model="formData.password"
        type="password"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
        :class="{ 'border-red-500': errors.password }"
      />
      <p v-if="errors.password" class="text-sm text-red-600">{{ errors.password }}</p>
    </div>
    
    <button
      type="submit"
      class="w-full px-4 py-2 text-white bg-indigo-500 rounded-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
    >
      {{ submitLabel }}
    </button>
  </form>
</template>`
    }

    private static generateLayoutComponent(name: string, description: string): string {
        return `<script setup lang="ts">
/**
 * ${description || `${name} 布局组件`}
 */
interface Props {
  title?: string;
  showSidebar?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: '页面标题',
  showSidebar: true
});
</script>

<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold text-gray-900">{{ title }}</h1>
          </div>
          <div class="flex items-center">
            <button class="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            <button class="ml-3 p-2 rounded-full bg-gray-200">
              <span class="sr-only">用户头像</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </header>
    
    <div class="flex">
      <!-- 侧边栏 -->
      <aside v-if="showSidebar" class="w-64 bg-white shadow-md">
        <nav class="mt-5 px-2">
          <a href="#" class="group flex items-center px-2 py-2 text-base font-medium rounded-md bg-indigo-100 text-indigo-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            首页
          </a>
          <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            统计
          </a>
        </nav>
      </aside>
      
      <!-- 主内容区 -->
      <main class="flex-1 p-6">
        <div class="max-w-7xl mx-auto">
          <slot></slot>
        </div>
      </main>
    </div>
  </div>
</template>`
    }

    private static generateDataComponent(name: string, description: string): string {
        return `<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

/**
 * ${description || `${name} 数据展示组件`}
 */
interface DataItem {
  id: number;
  name: string;
  email: string;
  role: string;
  status: 'active' | 'inactive';
}

interface Props {
  title?: string;
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: '用户列表',
  loading: false
});

const items = ref<DataItem[]>([]);
const searchQuery = ref('');
const currentPage = ref(1);
const itemsPerPage = 5;

// 模拟获取数据
const fetchData = () => {
  // 在实际应用中，这里会是一个API调用
  const mockData: DataItem[] = [
    { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: 'active' },
    { id: 2, name: '李四', email: 'lisi@example.com', role: '用户', status: 'active' },
    { id: 3, name: '王五', email: 'wangwu@example.com', role: '编辑', status: 'inactive' },
    { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '用户', status: 'active' },
    { id: 5, name: '钱七', email: 'qianqi@example.com', role: '用户', status: 'inactive' },
    { id: 6, name: '孙八', email: 'sunba@example.com', role: '编辑', status: 'active' },
    { id: 7, name: '周九', email: 'zhoujiu@example.com', role: '用户', status: 'active' },
  ];
  
  items.value = mockData;
};

// 过滤数据
const filteredItems = computed(() => {
  if (!searchQuery.value) return items.value;
  
  const query = searchQuery.value.toLowerCase();
  return items.value.filter(item => 
    item.name.toLowerCase().includes(query) || 
    item.email.toLowerCase().includes(query) ||
    item.role.toLowerCase().includes(query)
  );
});

// 分页数据
const paginatedItems = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage;
  return filteredItems.value.slice(startIndex, startIndex + itemsPerPage);
});

// 总页数
const totalPages = computed(() => 
  Math.ceil(filteredItems.value.length / itemsPerPage)
);

// 页码数组
const pageNumbers = computed(() => {
  const pages = [];
  for (let i = 1; i <= totalPages.value; i++) {
    pages.push(i);
  }
  return pages;
});

// 组件挂载时获取数据
onMounted(fetchData);
</script>

<template>
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <div class="p-4 border-b">
      <h2 class="text-lg font-medium text-gray-900">{{ title }}</h2>
      <div class="mt-2">
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索..."
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
      </div>
    </div>
    
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              姓名
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              邮箱
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              角色
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              状态
            </th>
            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
              操作
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <template v-if="loading">
            <tr>
              <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">
                加载中...
              </td>
            </tr>
          </template>
          <template v-else-if="paginatedItems.length === 0">
            <tr>
              <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">
                没有找到匹配的数据
              </td>
            </tr>
          </template>
          <template v-else>
            <tr v-for="item in paginatedItems" :key="item.id">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                {{ item.name }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ item.email }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ item.role }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span 
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                  :class="{
                    'bg-green-100 text-green-800': item.status === 'active',
                    'bg-red-100 text-red-800': item.status === 'inactive'
                  }"
                >
                  {{ item.status === 'active' ? '活跃' : '停用' }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">编辑</a>
                <a href="#" class="text-red-600 hover:text-red-900">删除</a>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    
    <!-- 分页 -->
    <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
      <div class="flex-1 flex justify-between sm:hidden">
        <button 
          @click="currentPage = Math.max(1, currentPage - 1)"
          :disabled="currentPage === 1"
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
        >
          上一页
        </button>
        <button 
          @click="currentPage = Math.min(totalPages, currentPage + 1)"
          :disabled="currentPage === totalPages"
          class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
        >
          下一页
        </button>
      </div>
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700">
            显示第 <span class="font-medium">{{ (currentPage - 1) * itemsPerPage + 1 }}</span> 到 
            <span class="font-medium">{{ Math.min(currentPage * itemsPerPage, filteredItems.length) }}</span> 条，
            共 <span class="font-medium">{{ filteredItems.length }}</span> 条结果
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            <button 
              @click="currentPage = Math.max(1, currentPage - 1)"
              :disabled="currentPage === 1"
              class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
              :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
            >
              <span class="sr-only">上一页</span>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
              </svg>
            </button>
            <button 
              v-for="page in pageNumbers" 
              :key="page"
              @click="currentPage = page"
              class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
              :class="currentPage === page ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
            >
              {{ page }}
            </button>
            <button 
              @click="currentPage = Math.min(totalPages, currentPage + 1)"
              :disabled="currentPage === totalPages"
              class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
              :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
            >
              <span class="sr-only">下一页</span>
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
              </svg>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>`
    }

    private static generateNavigationComponent(name: string, description: string): string {
        return `<script setup lang="ts">
import { ref } from 'vue';

/**
 * ${description || `${name} 导航组件`}
 */
interface MenuItem {
  id: string;
  label: string;
  icon?: string;
  href?: string;
  children?: MenuItem[];
}

interface Props {
  title?: string;
  items?: MenuItem[];
}

const props = withDefaults(defineProps<Props>(), {
  title: '应用名称',
  items: () => [
    {
      id: 'dashboard',
      label: '仪表盘',
      icon: 'home',
      href: '/dashboard'
    },
    {
      id: 'users',
      label: '用户管理',
      icon: 'users',
      children: [
        {
          id: 'users-list',
          label: '用户列表',
          href: '/users'
        },
        {
          id: 'users-create',
          label: '创建用户',
          href: '/users/create'
        }
      ]
    },
    {
      id: 'settings',
      label: '设置',
      icon: 'settings',
      href: '/settings'
    }
  ]
});

const isMobileMenuOpen = ref(false);
const expandedItems = ref<Set<string>>(new Set());

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
};

const toggleExpandItem = (itemId: string) => {
  if (expandedItems.value.has(itemId)) {
    expandedItems.value.delete(itemId);
  } else {
    expandedItems.value.add(itemId);
  }
};

const isExpanded = (itemId: string): boolean => {
  return expandedItems.value.has(itemId);
};

// 图标映射
const getIcon = (iconName?: string) => {
  const icons: Record<string, string> = {
    home: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />',
    users: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />',
    settings: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
    chevronDown: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />',
    menu: '<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />'
  };
  
  return iconName && icons[iconName] ? icons[iconName] : '';
};
</script>

<template>
  <div>
    <!-- 移动端导航栏 -->
    <div class="bg-white shadow-sm lg:hidden">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <h1 class="text-xl font-bold">{{ title }}</h1>
            </div>
          </div>
          <div class="flex items-center">
            <button 
              @click="toggleMobileMenu"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
            >
              <span class="sr-only">打开菜单</span>
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" v-html="getIcon('menu')"></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="lg:hidden" v-show="isMobileMenuOpen">
      <div class="pt-2 pb-3 space-y-1">
        <template v-for="item in items" :key="item.id">
          <template v-if="item.children">
            <div>
              <button 
                @click="toggleExpandItem(item.id)"
                class="w-full flex items-center px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
              >
                <svg v-if="item.icon" class="mr-3 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
                <span>{{ item.label }}</span>
                <svg class="ml-auto h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="{ 'transform rotate-180': isExpanded(item.id) }" v-html="getIcon('chevronDown')"></svg>
              </button>
              <div v-show="isExpanded(item.id)" class="mt-1 space-y-1 pl-8">
                <a 
                  v-for="child in item.children" 
                  :key="child.id" 
                  :href="child.href"
                  class="block px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
                >
                  {{ child.label }}
                </a>
              </div>
            </div>
          </template>
          <template v-else>
            <a 
              :href="item.href"
              class="flex items-center px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
            >
              <svg v-if="item.icon" class="mr-3 h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
              {{ item.label }}
            </a>
          </template>
        </template>
      </div>
    </div>
    
    <!-- 桌面端侧边栏 -->
    <div class="hidden lg:flex lg:flex-col lg:w-64 lg:fixed lg:inset-y-0 lg:border-r lg:border-gray-200 lg:bg-white">
      <div class="flex items-center h-16 flex-shrink-0 px-4 bg-white">
        <h1 class="text-xl font-bold">{{ title }}</h1>
      </div>
      <div class="flex-1 flex flex-col overflow-y-auto">
        <nav class="flex-1 px-2 py-4 space-y-1">
          <template v-for="item in items" :key="item.id">
            <template v-if="item.children">
              <div>
                <button 
                  @click="toggleExpandItem(item.id)"
                  class="w-full flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-md"
                >
                  <svg v-if="item.icon" class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
                  <span>{{ item.label }}</span>
                  <svg class="ml-auto h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="{ 'transform rotate-180': isExpanded(item.id) }" v-html="getIcon('chevronDown')"></svg>
                </button>
                <div v-show="isExpanded(item.id)" class="mt-1 space-y-1 pl-8">
                  <a 
                    v-for="child in item.children" 
                    :key="child.id" 
                    :href="child.href"
                    class="block px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md"
                  >
                    {{ child.label }}
                  </a>
                </div>
              </div>
            </template>
            <template v-else>
              <a 
                :href="item.href"
                class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-md"
              >
                <svg v-if="item.icon" class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getIcon(item.icon)"></svg>
                {{ item.label }}
              </a>
            </template>
          </template>
        </nav>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="lg:pl-64">
      <slot></slot>
    </div>
  </div>
</template>`
    }
}
